<template>
	<view>
		<view class="chat-page">
			<view class="chat-box" @click="toSystemMsg()" v-if="systemMsg.message">
				<view class="logo-box">
					<image :src="'../../static/logo.png'" class="logo"></image>
				</view>
				<view class="text-box">
					<view class="text-box-bar">
						<view class="text-name">系统消息</view>
						<view class="text-time">
							<uni-dateformat :date="systemMsg.createTime" format="yyyy-MM-dd hh:mm:ss" class="time-bar"></uni-dateformat>
						</view>
					</view>
					<view class="text-message limit-one-line">{{systemMsg.message}}</view>
				</view>
			</view>
			<view class="chat-box" v-for="msg in msgList" @click="toChat(msg.id)">
				<view class="logo-box">
					<image :src="msg.logo ? msg.logo : '../../static/logo.png'" class="logo"></image>
				</view>
				<view class="text-box">
					<view class="text-box-bar">
						<view class="text-name">{{msg.username}}</view>
						<view class="text-time">
							<uni-dateformat :date="msg.createTime" format="yyyy-MM-dd hh:mm:ss" class="time-bar"></uni-dateformat>
						</view>
					</view>
					<view class="text-message limit-one-line">{{msg.message}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config  from "@/config/app.js"
	export default {
		data() {
			return {
				msgList: [],
				systemMsg: {}
			}
		},
		methods: {
			getMessageList() {
				var that = this;
				this.$request.request({
					url: "/chat/getPageList",
					method: "GET",
				}).then(res=>{
					if (res.code == 200) {
						for (let i=0; i<res.data.length; i++) {
							if (res.data[i].logo) {
								res.data[i].logo = config.IMG_URL + res.data[i].logo
							}
							else {
								res.data[i].logo = '../../static/logo.png'
							}
						}
						that.msgList = res.data
					} else if(res.code == 401) {
						uni.showModal({
							title: res.message,
							showCancel: false,
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "../user/login"
									})()
								}
							}
						})
					} else {
						uni.showToast({
							title: "获取失败",
							icon: "none"
						})
					}
				})
			},
			getSystemMessage() {
				this.$request.request({
					url: "/systemMessage/getNewMessage",
					method: "GET",
					data: {
						// receiverId: this.receiverId
					}
				}).then(res=>{
					if (res.code == 200) {
						this.systemMsg = res.data[0];
					}
				})
			},
			toChat(id) {
				uni.navigateTo({
					url: "./chatPage?receiverId=" + id
				})
			},
			toSystemMsg() {
				uni.navigateTo({
					url: "./SysMsgPage"
				})
			}
		},
		onShow() {
			this.getMessageList();
			this.getSystemMessage();
		},
		onPullDownRefresh() {
			this.getMessageList();
			this.getSystemMessage();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	.chat-page {
		
		.chat-box {
			display: flex;
			padding: 20rpx;
			border-bottom: 1rpx #F2F1F6 solid;
			
			.logo-box {
				width: 100rpx;
				height: 100rpx;
				
				.logo {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
				}
			}
			
			.text-box {
				flex: 1;
				margin-left: 20rpx;
				
				.text-box-bar {
					display: flex;
					
					.text-name {
						font-size: 16px;
						color: #000000;
					}
					
					.text-time {
						flex: 1;
						font-size: 14px;
						text-align: right;
						color: #999999;
						
					}
				}
				
				.text-message {
					font-size: 16px;
					width: 600rpx;
					color: #999999;
				}
				
				
			}
			
		}
		
	}
</style>
